<template>
    <div class="trade-detail">
        <el-card class="box-card detail">
            <p>
                <span class="label">{{$t("trade.type")}}</span>
                <span class="">{{$route.query.type | tradeType}}</span>
            </p>
            <p>
                <span class="label">{{$t("trade.tradeTime")}}</span>
                <span class="">{{$route.query.timestamp | FormatDate}}</span>
            </p>
            <p>
                <span class="label">{{$t("trade.tradeHash")}}</span>
                <span id="pubKey">{{$route.query.hash}}</span>
                <span class="copyPubKey" @click="doCopy" data-clipboard-target="#pubKey"></span>
            </p>
            <p>
                <span class="label">{{$t("trade.tradeStatus")}}</span>
                <span class="pending">{{$t('trade.finished')}}</span>
            </p>
            <p>
                <span class="label">{{$t('trade.sum')}}</span>
                <span class="">{{$route.query.amount}} DLB</span>
            </p>
            <p>
                <span class="label">{{$t("wallet.from")}}</span>
                <span class="">{{$route.query.senderPublicKey}}</span>
            </p>
            <p>
                <span class="label">{{$t("wallet.to")}}</span>
                <span class="">{{$route.query.asset}}</span>
            </p>
            <p>
                <span class="label">{{$t("trade.fee")}}</span>
                <span class="">1 DLB</span>
            </p>
        </el-card>
    </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
    name: "trade-detail",
    data() {
        return{
            
        }
    },
    methods:{
        doCopy(){
            let clipboard = new Clipboard('.copyPubKey');
            //成功回调
            clipboard.on('success', e => {
                this.$message({
                    message: this.$t('wallet.copySuccess'),
                    type: 'success'
                });
                clipboard.destroy()
            });
            //失败回调
            clipboard.on('error', e => {
                this.$message({
                    message: this.$t('wallet.copyFail'),
                    type: 'warning'
                });
                clipboard.destroy()
            });
        }
    }
}
</script>

<style lang="less" scoped>
.trade-detail{
    position:absolute;
    top:65px;
    bottom:22px;
    left:10px;
    right:10px;
    .detail{
        height:100%;
        padding-top:20px;
        padding-left:20px;
        font-size:12px;
        p{
            margin-bottom:15px;
            color: #1A1A1A;
            .label{
                display:inline-block;
                min-width:150px;
                width:150px;
            }
            .pending{
                color: #FFBA00;
            }
            #pubKey{
                -moz-user-select: text; /*火狐*/
                -webkit-user-select: text; /*webkit浏览器*/
                -ms-user-select: text; /*IE10*/
                -khtml-user-select: text; /*早期浏览器*/
                user-select: text;
            }
            .copyPubKey{
                display:inline-block;
                width:16px;
                height:16px;
                background:url(./images/copy.png) no-repeat 0 0;
                background-size:cover;
                margin-left:20px;
                cursor: pointer;
            }
        }
    }
}
</style>
